import React, { useRef, useState } from 'react';
import { format } from '@/utils/datetime';
import PageHeader from '@/components/page/PageHeader';
import DataEdit from '@/components/base/DataEdit';
import DataTable from '@/components/base/DataTable';
import { Button, message } from 'antd';
import { UpdateUserOrgan } from '@/services/commCRUD';
import _ from 'lodash';
const daoName = 'UserNewOrgan';
const keyColName = 'ID';
const columns: API.Column[] = [
  {
    title: '员工',
    width: 140,
    sorter: true,
    key: 'EMID',
    dataIndex: ['User', 'Name'],
    dispaly: true,
    filter: false,
  },
  {
    title: '调动日期',
    width: 140,
    sorter: true,
    key: 'DDDT',
    dataIndex: 'DDDT',
    render: (data) => format(data, 'yyyy-MM-dd'),
    dispaly: true,
    filter: true,
    canEdit: true,
  },
  {
    title: '调动前部门',
    width: 180,
    sorter: true,
    key: 'OUTID',
    dataIndex: ['OOrganization', 'Name'],
    dispaly: true,
    filter: true,
  },
  {
    title: '调动后部门',
    width: 180,
    sorter: true,
    key: 'NUTID',
    dataIndex: ['NOrganization', 'Name'],
    dispaly: true,
    filter: true,
  },
  {
    title: '业绩变动',
    width: 160,
    sorter: true,
    key: 'YJBD',
    dataIndex: 'YJBDCaption',
    dispaly: true,
    filter: true,
    canEdit: false,
  },
  {
    title: '业绩是否处理',
    width: 120,
    sorter: true,
    key: 'ISCL',
    dataIndex: 'ISCLCaption',
    dispaly: true,
    filter: false,
    canEdit: false,
  },
  {
    title: '业绩保留员工1',
    width: 155,
    sorter: true,
    key: 'NEWEMID',
    dataIndex: ['NewUser', 'Name'],
    dispaly: true,
    filter: false,
  },
  {
    title: '分配比例1(%)',
    key: 'ZB1',
    dataIndex: 'ZB1',
    width: 140,
    sorter: true,
    dispaly: true,
    filter: false,
    render: (data) => (data.ZB1 === 0 ? '' : data.ZB1),
  },
  {
    title: '业绩保留员工2',
    width: 155,
    sorter: true,
    key: 'NEWEMID2',
    dataIndex: ['NewUser2', 'Name'],
    dispaly: true,
    filter: false,
  },
  {
    title: '分配比例2(%)',
    key: 'ZB2',
    dataIndex: 'ZB2',
    width: 140,
    sorter: true,
    dispaly: true,
    filter: false,
    render: (data) => (data.ZB2 === 0 ? '' : data.ZB2),
  },
];
const controls: API.Control[] = [
  {
    name: 'EMID',
    label: '员工',
    type: 'search',
    grid: 12 / 24,
    layout: { labelSpan: 8, wrapperSpan: 16 },
    rules: [{ required: true, message: '不能为空' }],
    fetch: {
      tableName: 'UserSel',
      searchColumns: ['No', 'Name'],
      optionTpl: 'NameCaption',
      valueTpl: 'ID',
      isDao: true,
    },
    dataType: 'number',
  },
  {
    name: 'DDDT',
    label: '调动日期',
    type: 'date',
    grid: 12 / 24,
    layout: { labelSpan: 8, wrapperSpan: 16 },
    dataType: 'date',
    rules: [{ required: true, message: '不能为空' }],
  },
  {
    name: 'OUTID',
    label: '调动前部门',
    type: 'tree-select',
    grid: 12 / 24,
    layout: { labelSpan: 8, wrapperSpan: 16 },
    rules: [{ required: true, message: '不能为空' }],
    fetch: {
      tableName: 'Organization',
      optionTpl: 'Name',
      valueTpl: 'ID',
      parentTpl: 'ParentID',
      isDao: true,
    },
    dataType: 'number',
  },
  {
    name: 'NUTID',
    label: '调动后部门',
    type: 'tree-select',
    grid: 12 / 24,
    layout: { labelSpan: 8, wrapperSpan: 16 },
    rules: [{ required: true, message: '不能为空' }],
    fetch: {
      tableName: 'Organization',
      optionTpl: 'Name',
      valueTpl: 'ID',
      parentTpl: 'ParentID',
      isDao: true,
    },
    dataType: 'number',
  },
  {
    name: 'YJBD',
    label: '业绩变动',
    rules: [{ required: false, message: '不能为空' }],
    options: [
      { value: '1', label: '业绩全部带走(历史)' },
      { value: '2', label: '业绩全部留给其他员工(2个)' },
      { value: '4', label: '业绩部分调整' },
    ],
    grid: 24 / 24,
    type: 'radio-group',
  },
  {
    name: 'ISCL',
    label: '业绩是否处理',
    rules: [{ required: true, message: '不能为空' }],
    grid: 24 / 24,
    type: 'text',
  },
  {
    name: 'NEWEMID',
    label: '业绩保留员工1',
    type: 'search',
    grid: 12 / 24,
    layout: { labelSpan: 8, wrapperSpan: 16 },
    rules: [{ required: true, message: '不能为空' }],
    fetch: {
      tableName: 'UserSel',
      searchColumns: ['No', 'Name'],
      optionTpl: 'Name',
      valueTpl: 'ID',
      isDao: true,
    },
    dataType: 'number',
  },
  {
    name: 'ZB1',
    rules: [{ required: false, message: '不能为空' }],
    type: 'number',
    label: '分配比例',
    dataType: 'number',
    grid: 12 / 24,
  },
  {
    name: 'NEWEMID2',
    label: '业绩保留员工2',
    type: 'search',
    grid: 12 / 24,
    layout: { labelSpan: 8, wrapperSpan: 16 },
    rules: [{ required: true, message: '不能为空' }],
    fetch: {
      tableName: 'UserSel',
      searchColumns: ['No', 'Name'],
      optionTpl: 'Name',
      valueTpl: 'ID',
      isDao: true,
    },
    dataType: 'number',
  },
  {
    name: 'ZB2',
    rules: [{ required: false, message: '不能为空' }],
    type: 'number',
    label: '分配比例',
    dataType: 'number',
    grid: 12 / 24,
  },
];
const controlsFilter: API.Control[] = [
  {
    name: 'EMID',
    label: '员工',
    type: 'search',
    grid: 7 / 24,
    width: 200,
    rules: [{ required: true, message: '不能为空' }],
    layout: { labelSpan: 8, wrapperSpan: 16 },
    fetch: {
      tableName: 'User',
      searchColumns: ['No', 'Name'],
      optionTpl: 'NameCaption',
      valueTpl: 'ID',
      isDao: true,
    },
    dataType: 'number',
  },
  {
    name: 'DDDT',
    label: '调动日期',
    rules: [{ required: true, message: '不能为空' }],
    type: 'date',
    grid: 8 / 24,
    width: 200,
    layout: { labelSpan: 8, wrapperSpan: 16 },
    dataType: 'date',
  },
  {
    name: 'NUTID',
    label: '调动后部门',
    rules: [{ required: true, message: '不能为空' }],
    type: 'search',
    grid: 8 / 24,
    width: 200,
    layout: { labelSpan: 8, wrapperSpan: 16 },
    fetch: {
      tableName: 'Organization',
      searchColumns: ['No', 'Name'],
      optionTpl: 'Name',
      valueTpl: 'ID',
      isDao: true,
    },
    dataType: 'number',
  },
];

const UserNewOrganFrom: React.FC = () => {
  const [xs, setXs] = useState<boolean>(false);
  const [id, setId] = useState<number>(0);
  const [curRow, setCurRow] = useState<Record<string, any>>();

  const [option, setOption] = useState<string>('1');
  const controlsFlow: API.Control[] = [
    {
      name: 'YJBD',
      label: '业绩变动',
      rules: [{ required: true, message: '不能为空' }],
      options: [
        { value: '1', label: '业绩全部带走(含历史)' },
        { value: '2', label: '业绩全部留给其他员工' },
      ],
      grid: 24 / 24,
      onChange: async (val) => {
        setOption(val);
      },
      type: 'select',
    },
    {
      name: 'NEWEMID1',
      label: '业绩保留员工1',
      type: 'search',
      grid: 12 / 24,
      layout: { labelSpan: 8, wrapperSpan: 16 },
      rules: [{ required: option === '2', message: '不能为空' }],
      disabled: option === '1',
      fetch: {
        tableName: 'User',
        searchColumns: ['No', 'Name'],
        optionTpl: 'NameCaption',
        valueTpl: 'ID',
        isDao: true,
      },
      dataType: 'number',
    },
    {
      name: 'ZB1',
      rules: [{ required: option === '2', message: '不能为空' }],
      label: '分配比例1(%)',
      disabled: option === '1',
      grid: 12 / 24,
      layout: { labelSpan: 8, wrapperSpan: 16 },
    },
    {
      name: 'NEWEMID2',
      label: '业绩保留员工2',
      type: 'search',
      disabled: option === '1',
      grid: 12 / 24,
      layout: { labelSpan: 8, wrapperSpan: 16 },
      rules: [{ required: false, message: '不能为空' }],
      fetch: {
        tableName: 'User',
        searchColumns: ['No', 'Name'],
        optionTpl: 'NameCaption',
        valueTpl: 'ID',
        isDao: true,
      },
      dataType: 'number',
    },
    {
      name: 'ZB2',
      rules: [{ required: false, message: '不能为空' }],
      label: '分配比例2(%)',
      disabled: option === '1',
      grid: 12 / 24,
      layout: { labelSpan: 8, wrapperSpan: 16 },
    },
  ];
  const tableRef = useRef<API.TableAction>();
  const submit = async () => {
    if (tableRef.current) {
      tableRef.current?.reload();
    }
  };
  const submit1 = async (vals: Record<string, any>) => {
    UpdateUserOrgan(id, vals.YJBD, vals.NEWEMID1, vals.ZB1, vals.NEWEMID2, vals.ZB2).then(
      function () {
        if (tableRef.current) {
          message.success('设置成功');
          tableRef.current?.reload();
        }
      },
    );
  };
  return (
    <PageHeader>
      <div style={{ marginTop: -5, marginBottom: 10 }}>
        {' '}
        <DataEdit
          showType="inner"
          layout="inline"
          title="员工调动"
          keyColName="ID"
          daoName={daoName}
          controls={controlsFilter}
          onSumit={submit}
          renderButtons={(p) => {
            return [
              <Button type="primary" key="1" onClick={() => p.form?.submit?.()}>
                添加
              </Button>,
              <Button
                type="primary"
                key="2"
                onClick={() => {
                  if (id === 0) {
                    message.info('请选择要设置的账户');
                    return;
                  }
                  if (curRow!.ISCL === 1) {
                    message.info('此调动已经处理，无需再处理');
                    return;
                  }
                  setXs(true);
                }}
              >
                设置业绩转移
              </Button>,
            ];
          }}
        />
      </div>
      <DataTable
        actionRef={tableRef}
        daoName={daoName}
        columns={columns}
        keyColName={keyColName}
        controls={controls}
        title="员工调动"
        pageSize={20}
        onSelectChange={async (keys, rows) => {
          if (!_.isEmpty(keys)) {
            setId(keys[0] as number);
            setCurRow(rows[0]);
          }
        }}
      />
      <DataEdit
        showType="modal"
        layout="vertical"
        title="员工调动"
        controls={controlsFlow}
        onSumit={submit1}
        visible={xs}
        initVals={{ YJBD: option }}
        width={400}
        onVisibleChange={(visible) => {
          setXs(visible);
        }}
        renderButtons={(p) => {
          return [
            <Button key="submit" type="primary" onClick={() => p.form?.submit?.()}>
              确定
            </Button>,
            <Button key="close" type="ghost" onClick={() => setXs(false)}>
              取消
            </Button>,
          ];
        }}
      />
      ;
    </PageHeader>
  );
};

export default UserNewOrganFrom;
